<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试文件</title>
</head>
<body>
	<canvas id="mycanvas" width="400" height="400" style="background-color:#333">
	</canvas>
	<script type="text/javascript">

    let canvas = document.getElementById("mycanvas");
    let context = canvas.getContext("2d");
    let radius = canvas.height / 2;
    context.translate(radius, radius);
    radius = radius * 0.90;
    setInterval(drawClock, 1000);
    function drawClock() {
	    drawFace(context, radius);
	    drawNumbers(context, radius);
	    drawLine(context, radius);
	    drawTime(context, radius);
    }
    drawClock();
    //画圆及描边
    function drawFace(context, radius) {
    	//画圆
    	context.beginPath();
    	context.arc(0, 0, radius, 0, 2 * Math.PI);
        //填充
    	context.fillStyle = "#f2ffe5";
    	context.fill();
        //描边
        let grd=context.createRadialGradient( 0, 0, radius * 0.95, 0, 0, radius * 1.05  );
		grd.addColorStop(0,"#333");
		grd.addColorStop(0.5,"white");
		grd.addColorStop(1,"#333");
		context.strokeStyle=grd;
        context.lineWidth = radius * 0.1;
        context.stroke();
        //画圆中心
        context.beginPath();
        context.arc(0, 0, radius*0.06, 0, 2 * Math.PI);
        context.fillStyle = "#333";
    	context.fill();
    }
    //画数字
    function drawNumbers(context, radius){
    	context.font = radius * 0.15 + "px arial";
	    context.textBaseline = "middle";       
	    context.textAlign = "center";
    	for (var num = 1; num <= 12; num++) {
    		var angle = num * Math.PI/6;
    		context.rotate(angle);//中心(圆心)旋转角度 + -> ×
            context.translate(0, -radius * 0.85);//改变中心
            context.rotate(-angle);//字体与视线对正
	        context.fillText(num.toString(), 0, 0);
	        /*--------*/
	        context.rotate(angle);//返回角度与y轴平行方向 ×
	        context.translate(0, radius * 0.85);//中心回归圆心
	        /*--------*/
	        context.rotate(-angle);//角度对正 + 
    	}
    }
	//画格线 
	function drawLine(context, radius) {
	    let i;
	    for (i = 1; i <= 60; i++) {
	        if (i % 5 == 0) {
	            context.strokeStyle = "red";
	        } else {
	            context.strokeStyle = "black";
	        }
	        context.beginPath();
	        context.lineWidth = radius * 0.02;
	        context.rotate(i * Math.PI / 30);
	        context.moveTo(0, -radius * 1.05);
	        context.lineTo(0, -radius * 0.95);
	        context.stroke();
	        context.rotate(-i * Math.PI / 30);
	    }
	}
    //指针随时间跳动(几点时指针(时，分，秒)对应旋转多少度)
    function drawTime(context, radius){
        let date = new Date();
        let hours = date.getHours();
        let minutes = date.getMinutes();
        let seconds = date.getSeconds();

        hours = hours % 12;  
        hours = (hours * Math.PI / 6) +
        (minutes * Math.PI / (6 * 60)) +
        (seconds * Math.PI / (6 * 60 * 60));
        drawHand(context, hours, radius * 0.4, radius * 0.05, "green");
        //分针旋转的角度+秒针走动时分针应该旋转的角度(1/60分)
        minutes = (minutes * Math.PI / 30) + (seconds * Math.PI / (30 * 60));
        drawHand(context, minutes, radius * 0.7, radius * 0.04, "blue");

        seconds = (seconds * Math.PI / 30);
        drawHand(context, seconds, radius * 0.8, radius * 0.02, "red"); 
    }
    //画指针
    function drawHand(context, pos, length, width, color){
        context.beginPath();
        context.lineWidth = width;
        context.lineCap="round";
        context.moveTo(0,0);
        context.rotate(pos);
        context.strokeStyle=color;
        context.lineTo(0,-length);
        context.stroke();
        context.rotate(-pos);
    }


	</script>
</body>

</html>